<script lang="ts">
	import { page } from '$app/state';
	import InviteList from './InviteList.svelte';
	import MemberList from './MemberList.svelte';
	import RagConfigList from './RagConfigList.svelte';

	const roadmapId = page.url.searchParams.get('roadmapId') ?? '';

	let menuKey = $state('memberList' as 'memberList' | 'inviteList' | 'ragConfigList');
</script>

<div class="ml-[100px] mr-[100px] flex">
	<ul class="menu rounded-box w-[200px] text-xl flex-nowrap">
		<li>
			<button
				class={menuKey == 'memberList' ? 'menu-active' : ''}
				onclick={() => (menuKey = 'memberList')}>成员列表</button
			>
		</li>
		<li>
			<button
				class={menuKey == 'inviteList' ? 'menu-active' : ''}
				onclick={() => (menuKey = 'inviteList')}>邀请记录</button
			>
		</li>
		<li>
			<button
				class={menuKey == 'ragConfigList' ? 'menu-active' : ''}
				onclick={() => (menuKey = 'ragConfigList')}>知识库配置</button
			>
		</li>
	</ul>
	<div class="divider divider-horizontal"></div>
	<div class="h-[calc(100vh-110px)] overflow-y-auto w-full">
		{#if menuKey == 'memberList'}
			<MemberList {roadmapId} />
		{:else if menuKey == 'inviteList'}
			<InviteList {roadmapId} />
		{:else if menuKey == 'ragConfigList'}
			<RagConfigList {roadmapId} />
		{/if}
	</div>
</div>
